<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一周</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
   <div class="container">
       <section class="hero">
           <header>
               <img src="" alt="">
               <ul>
                   <li>Agents</li>
                   <li>Login</li>
                   <li>Sign up</li>
               </ul>
           </header>
           <div class="hero_center">
               <h1>Relax, Finding An Agent Just Got Easier</h1>
               <h2>Receive proposals from best agents for free</h2>
               <form action=""><input type="text" placeholder="Enter a suburb"><input type="button" value="search"></form>
           </div>
       </section>
       <section class="numbers">
           <ul>
               <li class="number">
                   <h2>20,000</h2>
                   <h3>20,000</h3>
               </li>
               <li class="number">
                   <h2>20,000</h2>
                   <h3>20,000</h3>
               </li>
               <li class="number">
                   <h2>20,000</h2>
                   <h3>20,000</h3>
               </li>
               <li class="number_last">
                   <h2>20,000</h2>
                   <h3>20,000</h3>
               </li>
           </ul>
       </section>
       <section class="how-it-works">
        <h2>How it works</h2>

        <div class="wrapper_center"><ul>
            <li>
                <div class="detail">
                    <span class="number">1</span>
                    <i class="icon-list"></i>
                    <h3>Compare</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum temporibus cupiditate asperiores voluptatum ipsam, labore, incidunt eos at sunt, mollitia et nemo ullam consequatur!</p>
                </div>
            </li>
            <li>
                <div class="detail">
                    <span class="number">2</span>
                    <i class="icon-pencil"></i>
                    <h3>Receive Proposals</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum temporibus cupiditate asperiores voluptatum ipsam, labore, incidunt eos at sunt, mollitia et nemo ullam consequatur!</p>
                </div>
            </li>
            <li>
                <div class="detail last">
                    <span class="number">3</span>
                    <i class="icon-users"></i>
                    <h3>Sell with the Best</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum temporibus cupiditate asperiores voluptatum ipsam, labore, incidunt eos at sunt, mollitia et nemo ullam consequatur!</p>
                </div>
            </li>
        </ul>
            </div>
    </section>
    </div>
</body>
</html>